<template>
  <div class="game">
      当前是{{dangqian_num%2==0?'O':'X'}}
      <ul>
          <li v-for="(i,index) in list" @click="dianji(i)" :key="index">
              {{i.text}}
          </li>
      </ul>
      <div @click="chongkai">
          重新开局
      </div>
      <zujian :value='2000'></zujian>
  </div>
</template>

<script>
import zujian from './zujian.vue'
export default {
    name: "game",
    components:{zujian},
    data() {
        return {
            dangqian_num:1,
            list:[
                {
                    text:''
                },
                {
                    text:''
                },
                {
                    text:''
                },
                {
                    text:''
                },
                {
                    text:''
                },
                {
                    text:''
                },
                {
                    text:''
                },
                {
                    text:''
                },
                {
                    text:''
                },
            ]
        };
    },
    created() {},
    methods: {
        dianji(i){
            this.$set(i,'text',this. dangqian_num%2==0?'O':'X')
            this.dangqian_num=this.dangqian_num+1
            this.panduan()
        },
        panduan(){
            let a=[]
            this.list.forEach((item,index)=>{
                if(item.text=='X'){
                    a.push(index)
                }
            })
            if(a.length>=3){
                // a也算x  0  1  2      3  7    
                for(let i=0;i<this.list.length;i++){
                    if(this.list[i].text.length!=0){
                        if(i==0){
                            let zhi=this.list[i].text
                            if(this.list[1].text==zhi&&this.list[2].text==zhi){
                                alert(zhi+'胜')
                                return
                            }else if(this.list[3].text==zhi&&this.list[6].text==zhi){
                                alert(zhi+'胜')
                                return
                            }else if(this.list[4].text==zhi&&this.list[8].text==zhi){
                                alert(zhi+'胜')
                                return
                            }
                        }
                        if(i==1){
                            let zhi=this.list[i].text
                            if(this.list[4].text==zhi&&this.list[7].text==zhi){
                                alert(zhi+'胜')
                                return
                            }
                        }
                        if(i==2){
                            let zhi=this.list[i].text
                            if(this.list[5].text==zhi&&this.list[8].text==zhi){
                                alert(zhi+'胜')
                                return
                            }else if(this.list[4].text==zhi&&this.list[6].text==zhi){
                                alert(zhi+'胜')
                                return
                            }
                        }
                        if(i==3){
                            let zhi=this.list[i].text
                            if(this.list[4].text==zhi&&this.list[5].text==zhi){
                                alert(zhi+'胜')
                                return
                            }
                        }
                        if(i==6){
                            let zhi=this.list[i].text
                            if(this.list[7].text==zhi&&this.list[8].text==zhi){
                                alert(zhi+'胜')
                                return
                            }
                        }
                    }
                }
            }
        },
        chongkai(){
            this.list=[
                {
                    text:''
                },
                {
                    text:''
                },
                {
                    text:''
                },
                {
                    text:''
                },
                {
                    text:''
                },
                {
                    text:''
                },
                {
                    text:''
                },
                {
                    text:''
                },
                {
                    text:''
                },
            ]
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.game ul li{
    height:200px;
    width:200px;
    border:1px solid red;
    font-size: 25px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}
.game ul{
    width:602px;
    display: flex;
    flex-wrap: wrap;
    border:1px solid red;
}
</style>
